<template>
  <div class="mosk">
    <div class="box" :model="datalist">
      <div class="top">
        <p>|</p>
        <span>规则详情</span>
      </div>
      <div class="top1">
        <p>|</p>
        <span>基本信息</span>
      </div>
      <div class="tables">
        <div class="box1">
          <span>规则名称</span>
          <span>瓦搜索</span>
          <span>所属项目</span>
          <span>xxxxx项目1</span>
        </div>
        <div class="box2">
          <span>应用考勤组</span>
          <div class="box3">
           <p>考勤组2</p>
          </div>
        </div>
      </div>
      <div class="top1">
        <p>|</p>
        <span>规则详情</span>
      </div>
      <table cellspacing="0" border="1">
        <tr>
          <th>上班时间</th>
          <th>8:00-8:30</th>
        </tr>
        <tr>
          <td>上班开始签到时间</td>
          <td>30 min</td>
          <td>上班结束签到时间</td>
          <td>30 min</td>
        </tr>
        <tr>
          <td>下班时间</td>
          <td>18:00-18:30</td>
        </tr>
        <tr>
          <td>下班开始签到时间</td>
          <td>30 min</td>
          <td>下班结束签到时间</td>
          <td>30 min</td>
        </tr>
        <tr>
          <td>午休时间</td>
          <td>12:00-13:00</td>
        </tr>
        <tr>
          <td>午休开始签到时间</td>
          <td>30 min</td>
          <td>午休结束签到时间</td>
          <td>30 min</td>
        </tr>
        <tr>
          <td>记加班时间间隔</td>
          <td>30 min</td>
        </tr>
      </table>
      <div class="btn">
        <el-button type="warning" @click="obtn">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { TabsPaneContext } from "element-plus";
import { Delete } from "@element-plus/icons-vue";
import service from "../../../utils/service";

const props = defineProps<{
  id: string;
}>();
console.log(props.id);

// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();
// 取消
const obtn = () => {
  // 触发隐藏事件
  emit("hide");
};
interface Ilist {
  name: string;
  items: string;
  application: string;
}

let datalist = reactive<Ilist>({
  name: "",
  items: "",
  application: "",
});
const changlist = () => {
  service({
    url: "http://localhost:3000/rulelist",
    method: "get",
    params: {
      id: props.id,
    },
  }).then((res) => {
    datalist.name = res.data[0].name;
    datalist.items = res.data[0].items;
    datalist.application = res.data[0].application;
    console.log(res.data);
  });
};
changlist();
</script>

<style scoped>
.mosk {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.box {
  width: 939px;
  height: 700px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 999;
  overflow: auto;
}
.box .top {
  display: flex;
}
.box .top p {
  color: #3bb19c;
}
.box .top span {
  font-weight: 700;
}
.tables {
  margin-left: 60px;
}
.box .top1 {
  display: flex;
  margin-left: 50px;
}
.box .top1 p {
  color: #3bb19c;
}
.box .top1 span {
  font-weight: 700;
}

.box1 {
  display: flex;
  border: 1px solid gainsboro;
  height: 40px;
  line-height: 40px;
  width: 700px;
  margin: 0 20px;
}
.box1 span {
  width: 25%;
  border-right: 1px solid rgba(128, 128, 128, 0.858);
  text-align: center;
}
.box2 {
  width: 700px;
  height: 150px;
  border: 1px solid gray;
  margin: 0 20px;
  display: flex;
}
.box2 span {
  width: 25%;
  height: 150px;
  text-align: center;
  line-height: 150px;
  font-weight: 700;
  border-right: 1px solid rgba(128, 128, 128, 0.858);
}
.box3 p {
  margin-top: 10px;
}

.btn {
  float: right;
}
td {
  text-align: center;
}
table {
  width: 700px;
  height: 300px;
  margin-left: 60px;
  border: 1px solid gainsboro;
}
</style>